{% extends '@PimUI/actions/update.html.twig' %}
{% import '@PimUI/macros.html.twig' as UI %}
{% import '@PimDataGrid/macros.html.twig' as dataGrid %}
{% import '@PimUI/Default/page_elements.html.twig' as elements %}

{% set entityId = form.vars.value.id %}
{% set title = entityId ? 'Update Group'|trans : 'New Group'|trans %}
{% set gridName = 'pimgroup-user-grid' %}
{% set formAction = entityId ? path('pim_user_group_update', { 'id': entityId}) : path('pim_user_group_create') %}

{% set breadcrumbs = {} %}
{% if entityId %}
    {% set breadcrumbs = {
        'entity':      form.vars.value,
        'indexPath':   '#%s'|format(path('pim_user_group_index')),
        'indexLabel': 'Groups'|trans,
        'entityTitle': form.vars.value.name
    }
    %}
{% else %}
    {% set breadcrumbs = title %}
{% endif %}

{% block navButtons %}
    {% if entityId and resource_granted('pim_user_group_remove') %}
        <div class="AknSecondaryActions AknDropdown AknButtonList-item secondary-actions">
          <div class="AknSecondaryActions-button dropdown-button" data-toggle="dropdown"></div>
          <div class="AknDropdown-menu AknDropdown-menu--right">
              <div class="AknDropdown-menuTitle">{{'other_actions'|trans}}</div>
              {{ elements.deleteLink(
                path('pim_user_group_delete', {'id': entityId}),
                'pim_user_group_remove',
                path('pim_user_group_index'),
                'Are you sure you want to delete this group?'|trans,
                'Group removed'|trans,
                'confirmation.delete'|trans,
                'AknDropdown-menuLink delete',
                'Groups'|trans
              )}}
          </div>
        </div>
    {% endif %}
    {{ UI.saveAndStayButton('pim_user_group_edit') }}
{% endblock navButtons %}

{% block content_data %}
    {% set id = 'group-profile' %}

        {{ elements.form_navbar(view_element_aliases(form.vars.id ~ '.form_tab')) }}

        <div class="AknTabContainer-content tab-content">
            {{ elements.form_errors(form) }}
            {{ view_elements(form.vars.id ~ '.form_tab') }}
        </div>

    <script type="text/javascript" nonce="{{ js_nonce() }}">
        require('pim/page-title').set({'group': '{{ form.vars.value.name }}'});

        window.flashMessages = JSON.parse('{{ app.session.flashbag.all|json_encode()|raw }}');
    </script>

    <script nonce="{{ js_nonce() }}">
        require(
            [
                'pim/common/breadcrumbs',
                'pim/fetcher-registry',
                'pim/form-builder'
            ],
            function(
                Breadcrumbs,
                FetcherRegistry,
                FormBuilder
            ) {
                $(function() {
                    var breadcrumbs = new Breadcrumbs({
                        config: {
                            tab: 'pim-menu-system',
                            item: 'pim-menu-system-user-group'
                        }
                    });
                    breadcrumbs.configure().then(function () {
                        breadcrumbs.render();
                        $('*[data-drop-zone="breadcrumbs"]').append(breadcrumbs.$el);
                    });

                    FetcherRegistry.initialize().done(function () {
                        FormBuilder.build('pim-menu-user-navigation').then(function (form) {
                            $('.user-menu').append(form.el);
                            form.render();
                        }.bind(this));
                    });
                });
            }
        );
    </script>
    <script nonce="{{ js_nonce() }}">
        require(
            ['pim/sandbox-helper'],
            function(SandboxHelper) {
                $(function() {
                    var sandboxHelper = new SandboxHelper({});
                    sandboxHelper.configure().then(function () {
                        sandboxHelper.render();
                        $('*[data-drop-zone="helper"]').append(sandboxHelper.$el);
                    });
                });
            }
        );
    </script>
{% endblock content_data %}
